// 导入context函数
import React, { createContext } from "react";
// 兄弟组件传值状态提升

const Sister = ({ money }) => {
  return <h1>我是姐姐{money}</h1>;
};
// 跨组件通信 1创建context对象
// provider状态提供者 Consumer状态消费者
const { Provider, Consumer } = createContext();
const GrandSon = () => {
  return (
    <div>
      我是孙子<Consumer>{(color) => <p>{color}</p>}</Consumer>
    </div>
  );
};
const Son = ({ name, money, clickSum }) => {
  return (
    <div>
      <h1>
        我是子组件{name}
        {money}
        <button
          onClick={() => {
            clickSum(10);
          }}
        >
          带你
        </button>
        <GrandSon></GrandSon>
      </h1>
    </div>
  );
};
class App extends React.Component {
  state = {
    money: 100,
  };
  clickSumFn = (money) => {
    console.log(money);
    this.setState({ money: this.state.money - money });
  };
  render() {
    return (
      <Provider value={this.state.money}>
        <div>
          <h1>我是父亲</h1>
          <Son
            name="jack"
            money={this.state.money}
            clickSum={this.clickSumFn}
          ></Son>
          <Sister money={this.state.money}></Sister>
        </div>
      </Provider>
    );
  }
}
export default App;
